<html>
<meta charset="utf-8">

<head>
    <script src="jquery-3.2.1.min.js"></script>
    <style>
        .tooltip {
            position: relative;
            display: inline-block;
        }

        .tooltip .content {
            visibility: hidden;
            background-color: black;
            color: white;
            border-radius: 5px;
            text-align: center;
            position: absolute;
            z-index: 1;
            padding: 2px 15px;
        }

        .tooltip .content_right {
            visibility: hidden;
            background-color: black;
            color: white;
            border-radius: 5px;
            text-align: center;
            position: absolute;
            z-index: 1;
            padding: 4px 15px;
            left: 105%;
            top: -2px;
            min-width: 60px;
        }


        .tooltip .content_left {
            visibility: hidden;
            background-color: black;
            color: white;
            border-radius: 5px;
            text-align: center;
            position: absolute;
            z-index: 1;
            padding: 4px 15px;
            right: 105%;
            top: -2px;
            min-width: 60px;

            opacity: 0;
            transition: opacity 2s;
        }


        .tooltip .content_top {
            visibility: hidden;
            background-color: black;
            color: white;
            border-radius: 5px;
            text-align: center;
            position: absolute;
            z-index: 1;
            padding: 4px 15px;
            bottom: 100%;
            left: 25%;
            width: 60px;
           
        }

        .tooltip:hover .content {
            visibility: visible;
        }

        .tooltip:hover .content_right {
            visibility: visible;
        }

        .tooltip:hover .content_left {
            visibility: visible;
            opacity: 1;
        }

        .tooltip:hover .content_top {
            visibility: visible;
        }
        .content_top::after{
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            border-style: solid;
            border-width: 5px;
            border-color: black  transparent transparent  transparent;
            margin-left: -8px;
        }
    </style>
</head>
<div class="tooltip">
    鼠标悬停出现提示框(下方)
    <span class="content">提示</span>
</div>
<hr>

<div class="tooltip">
    鼠标悬停出现提示框（右侧）
    <span class="content_right">提示</span>
</div>

<div class="tooltip">
    鼠标悬停出现提示框（左侧） 和 淡入淡出效果
    <span class="content_left">提示</span>
</div>
<hr>
<div class="tooltip">
    鼠标悬停出现提示框（上方） 并添加箭头
    <span class="content_top">提示</span>
</div>

</html>